<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="../../static/easyui/bootstrap/css/bootstrap.min.css"/>
    <script type="text/javascript" src="../../static/easyui/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/easyui/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/easyui/css/common/box.css"/>
    <link rel="stylesheet" type="text/css" href="../../static/easyui/css/common/checkbox.css"/>
    <title>Title</title>
</head>
<style type="text/css">
    a {
        color: black;
    }

    a:hover {
        text-decoration: none;
    }

    .bgc-w {
        background-color: #fff;
    }
</style>
<body>
<div class="row" style="padding-top: 10px;">
    <div class="col-md-2">
        <h1 style="font-size: 24px; margin: 0;" class="">流程管理</h1>
    </div>
    <div class="col-md-10 text-right">
        <a href="index"><span class="glyphicon glyphicon-home"></span> 首页</a> &gt;
        <a disabled="disabled">流程管理</a>
    </div>
</div>

<div class="row" style="padding-top: 15px;">
    <div class="col-md-12 thistable">
        <!--id="container"-->
        <div class="bgc-w box box-primary">
            <!--盒子头-->
            <div class="box-header">
                <h3 class="box-title">
                    <a href="" class="label label-success" style="padding: 5px;">
                        <span class="glyphicon glyphicon-refresh"></span> 刷新
                    </a>
                </h3>
                <div class="box-tools">
                    <div class="input-group" style="width: 220px;">
                        <input type="text" class="form-control input-sm cha" placeholder="审核人，类型，标题，状态查询">
                        <div class="input-group-btn chazhao">
                            <a class="btn btn-sm btn-default"><span class="glyphicon glyphicon-search"></span></a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="box-body no-padding">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>

                            <th scope="col">类型</th>
                            <th scope="col">标题</th>
                            <th scope="col">申请时间</th>
                            <th scope="col">审核人</th>
                            <th scope="col">紧急程度</th>
                            <th scope="col">状态</th>
                            <th scope="col">操作</th>
                        </tr>
                        </thead>
                        <tbody id="processTbody">
                        <%--<tr>--%>
                        <%--<td>费用报销</td>--%>
                        <%--<td><span>费用报销</span></td>--%>
                        <%--<td><span>2017-10-6 21:54:42</span></td>--%>
                        <%--<td><span></span></td>--%>
                        <%--<td><span>正常</span></td>--%>
                        <%--<td><span class="label label-success">已批准</span></td>--%>

                        <%--<td><a href="particular?id=1&amp;typename=费用报销" class="label xiugai"><span--%>
                        <%--class="glyphicon glyphicon-search"></span> 查看</a>--%>
                        <%--</td>--%>
                        <%--</tr>--%>
                        </tbody>
                    </table>
                </div>

                <!--盒子尾-->
                <div class="box-footer no-padding" style="margin-top: -20px;">
                    <div style="padding: 5px;">
                        <div id="page"
                             style="background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;">
                            <div style="width: 40%; float: left;">
                                <div class="pageInfo" style="margin-left: 5px;">
                                    <%--共<span>1</span>条 | 每页<span>10</span>条--%>
                                    <%--| 共<span>1</span>页--%>
                                </div>
                            </div>
                            <div style="width: 60%; float: left;">
                                <div class="pageOperation">
                                    <%--<!--判断是否是第一页  -->--%>
                                    <%--<a class="btn btn-sm btn-default no-padding tablefirst" disabled="disabled"--%>
                                       <%--style="width: 30px; height: 20px;"> <span--%>
                                            <%--class="glyphicon glyphicon-backward"></span></a>--%>
                                    <%--<a class="btn btn-sm btn-default no-padding tableup" disabled="disabled"--%>
                                       <%--style="width: 30px; height: 20px;"> <span--%>
                                            <%--class="glyphicon glyphicon-triangle-left"></span></a>--%>
                                    <%--<a disabled="disabled" class="btn btn-default no-padding"--%>
                                       <%--style="width: 30px; height: 20px;">--%>
                                        <%--1--%>
                                    <%--</a>--%>
                                    <%--<!--判断是否是最后一页  -->--%>
                                    <%--<a class="btn btn-sm btn-default no-padding tabledown" disabled="disabled"--%>
                                       <%--style="width: 30px; height: 20px;"> <span--%>
                                            <%--class="glyphicon glyphicon-triangle-right"></span></a>--%>
                                    <%--<a class="btn btn-sm btn-default no-padding tablelast" disabled="disabled"--%>
                                       <%--style="width: 30px; height: 20px;"> <span--%>
                                            <%--class="glyphicon glyphicon-forward"></span></a>--%>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    $(document).ready(function () {
        var proposerId = "${sessionScope.accountMap.accountId}"
        var pageNum=1;
        var pageSize=5;
        sendAjax(proposerId,pageNum,pageSize)
        /*动态获取*/
        $(document).on("click",".box-footer a" ,function () {
            var pageNum = $(this).prop("title"); // 每一个a标签的title属性值就是页码
            // 发送请求
            sendAjax(proposerId,pageNum,pageSize);
        })
        function sendAjax(proposerId,pageNum,pageSize) {
            $.ajax({
                async: true,
                type: "GET",
                url: "/process/processList",
                data: {
                    proposerId: proposerId,
                    pageNum:pageNum,
                    pageSize:pageSize
                },
                dataType: "json",
                success: function (result) {
                    var content = "";
                    $.each(result.list, function (index, myProcess) {
                        content += "<tr>\n" +
                            "                        <td>" + myProcess.processTypeName + "</td>\n" +
                            "                        <td><span>" + myProcess.processTitle + "</span></td>\n" +
                            "                        <td><span>" + myProcess.applyDate + "</span></td>\n" +
                            "                        <td><span>" + myProcess.assessorName + "</span></td>\n" +
                            "                        <td><span>" + myProcess.urgencyName + "</span></td>\n";
                        if (myProcess.processStatus == 0) {
                            content += "                        <td><span class=\"label label-info\">未处理</span></td>\n";
                        } else if (myProcess.processStatus == 1) {
                            content += "                        <td><span class=\"label label-success\">已批准</span></td>\n";
                        } else if (myProcess.processStatus == 2) {
                            content += "                        <td><span class=\"label label-danger\">未通过</span></td>\n";
                        }
                        content += "                        <td>" +
                            "<a href=\"/admin/process/processContent.jsp?processTypeName=" + myProcess.processTypeName + "&applyDate=" + myProcess.applyDate +
                            "&proposerName=" + myProcess.proposerName + "&processDetail=" + myProcess.processDetail + "&startDate=" + myProcess.startDate +
                            "&processTitle=" + myProcess.processTitle + "&endDate=" + myProcess.endDate + "&urgencyName=" + myProcess.urgencyName +
                            "&wayName=" + myProcess.wayName + "&costMoney=" + myProcess.costMoney + "&evectionTypeName=" + myProcess.evectionTypeName +
                            "&vacateTypeName=" + myProcess.vacateTypeName + "&overtimeTypeName=" + myProcess.overtimeTypeName + "&overtimeTime=" + myProcess.overtimeTime +
                            "&vacateDays=" + myProcess.vacateDays + "&processTypeId=" + myProcess.processTypeId + "&resignDate=" + myProcess.resignDate + "\" " +
                            "class=\"label xiugai\"><span\n" +
                            "                        class=\"glyphicon glyphicon-search\"></span> 查看</a>\n" +
                            "                        </td>\n" +
                            "                        </tr>"
                    })
                    $("#processTbody").html(content);

                    var pageContent = " <div class=\"box-footer no-padding\" style=\"margin-top: 0px;\">\n" +
                        "                <div style=\"padding: 5px;\">\n" +
                        "                    <div id=\"page\" style=\"background: #fff; border: 0px; margin-top: 0px; padding: 2px; height: 25px;\">\n" +
                        "                        <div style=\"width: 40%; float: left;\">\n" +
                        "                            <div class=\"pageInfo\" style=\"margin-left: 5px;\">\n" +
                        "                                共<span>"+result.total+"</span>条 | 每页<span>"+result.pageSize+"</span>条\n" +
                        "                                | 共<span>"+result.pages+"</span>页\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                        <div style=\"width: 60%; float: left;\">\n" +
                        "                            <div class=\"pageOperation\">";

                    // 分页数据的渲染
                    //首页+上一页
                    if (result.pageNum == 1){
                        pageContent += "<a class=\"btn btn-sm btn-default no-padding tablefirst\" disabled=\"disabled\" title=\"1\" style=\"width: 30px; height: 20px;\">\n" +
                            "                                    <span class=\"glyphicon glyphicon-backward\"></span>\n" +
                            "                                </a>\n" +
                            "                                <a class=\"btn btn-sm btn-default no-padding tableup\" disabled=\"disabled\" title=\"1\" style=\"width: 30px; height: 20px;\">\n" +
                            "                                    <span class=\"glyphicon glyphicon-triangle-left\"></span>\n" +
                            "                                </a>";
                    }else{
                        pageContent += "<a class=\"btn btn-sm btn-default no-padding tablefirst\"  title=\"1\" style=\"width: 30px; height: 20px;\">\n" +
                            "                                    <span class=\"glyphicon glyphicon-backward\"></span>\n" +
                            "                                </a>\n" +
                            "                                <a class=\"btn btn-sm btn-default no-padding tableup\"title=\""+result.prePage+"\" style=\"width: 30px; height: 20px;\">\n" +
                            "                                    <span class=\"glyphicon glyphicon-triangle-left\"></span>\n" +
                            "                                </a>";
                    }
                    // 页码
                    for (let i = 1;i<=result.pages;i++){
                        if (result.pageNum == i){
                            pageContent += " <a disabled=\"disabled\" class=\"btn btn-default no-padding num\" title=\""+i+"\" style=\"width: 30px; height: 20px;\">\n" +
                                ""+i+"\n" +
                                "</a>";
                        }else{
                            pageContent += " <a class=\"btn btn-default no-padding num\" title=\""+i+"\" style=\"width: 30px; height: 20px;\">\n" +
                                ""+i+"\n" +
                                "</a>";
                        }
                    }
                    //下一页和尾页
                    if (result.pageNum == result.pages){
                        pageContent += " <a class=\"btn btn-sm btn-default no-padding tabledown\" disabled=\"disabled\" title=\""+result.pages+"\" style=\"width: 30px; height: 20px;\">\n" +
                            "                                    <span class=\"glyphicon glyphicon-triangle-right\"></span>\n" +
                            "                                </a>\n" +
                            "                                <a class=\"btn btn-sm btn-default no-padding tablelast\" disabled=\"disabled\" title=\""+result.pages+"\" style=\"width: 30px; height: 20px;\">\n" +
                            "                                    <span class=\"glyphicon glyphicon-forward\"></span>\n" +
                            "                                </a>";
                    } else{
                        pageContent += " <a class=\"btn btn-sm btn-default no-padding tabledown\"  title=\""+result.nextPage+"\" style=\"width: 30px; height: 20px;\">\n" +
                            "                                    <span class=\"glyphicon glyphicon-triangle-right\"></span>\n" +
                            "                                </a>\n" +
                            "                                <a class=\"btn btn-sm btn-default no-padding tablelast\"  title=\""+result.pages+"\" style=\"width: 30px; height: 20px;\">\n" +
                            "                                    <span class=\"glyphicon glyphicon-forward\"></span>\n" +
                            "                                </a>";

                    }
                    pageContent += " </div>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                    </div>"
                    /*pageContent += "<a class=\"btn btn-sm btn-default no-padding tabledown\" style=\"width: 30px; height: 20px;\"> " +
                                    "<span class=\"glyphicon glyphicon-triangle-right\"></span><a href=\"#\" title=\""+result.nextPage+"\">下一页</a>"
                    pageContent+="<a class=\"btn btn-sm btn-default no-padding tablelast\" style=\"width: 30px; height: 20px;\"> " +
                                 "<span class=\"glyphicon glyphicon-forward\"></span><a href=\"#\" title=\""+result.pages+"\">尾页</a>"
*/


                    $(".box-footer").html(pageContent);
                },
                error: function () {
                    alert("异步请求失败！");
                }
            });
        }
    })
</script>
<script>
    /* 分页插件按钮的点击事件 */
    /* url是从后台接收过来的链接，sort是记录排序规则 */
    $('.tablefirst').on('click', function () {
        if (true == false) {
            $('.thistable').load('shenser?page=0');
        }
    });
    $('.tableup').on('click', function () {
        if (true == false) {
            $('.thistable').load('shenser?page=-1');
        }
    });
    $('.tabledown').on('click', function () {
        if (true == false) {
            $('.thistable').load('shenser?page=1');
        }
    });
    $('.tablelast').on('click', function () {
        if (true == false) {
            $('.thistable').load('shenser?page=0');
        }

    });

    /*类型、状态、时间的排序  */
    $('.thistype').on('click', function () {
        if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
            $('.thistable').load('shenser?type=0&icon=glyphicon-triangle-top');
        } else {
            $('.thistable').load('shenser?type=1&icon=glyphicon-triangle-bottom');
        }
    });
    $('.thisstatus').on('click', function () {
        if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
            $('.thistable').load('shenser?status=0&icon=glyphicon-triangle-top');
        } else {
            $('.thistable').load('shenser?status=1&icon=glyphicon-triangle-bottom');
        }
    });
    $('.thistime').on('click', function () {
        if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
            $('.thistable').load('shenser?time=0&icon=glyphicon-triangle-top');
        } else {
            $('.thistable').load('shenser?time=1&icon=glyphicon-triangle-bottom');
        }
    });
    $('.thisvisit').on('click', function () {
        if ($(this).children().hasClass('glyphicon-triangle-bottom')) {
            $('.thistable').load('shenser?visitnum=0&icon=glyphicon-triangle-top');
        } else {
            $('.thistable').load('shenser?visitnum=1&icon=glyphicon-triangle-bottom');
        }
    });
    /* 查找 */
    $('.baseKetsubmit').on('click', function () {
        var baseKey = $('.baseKey').val();
        console.log(baseKey);
        $('.thistable').load('shenser?baseKey=' + baseKey + '');
    });
</script>
<script>
    /* 分页插件按钮的点击事件 */

    $('.baseKetsubmit').on('click', function () {
        var baseKey = $('.baseKey').val();
        $('.thistable').load('shenser?baseKey=baseKey');
    });


    $(function () {
        $(".chazhao").click(function () {
            var con = $(".cha").val();
            $(".thistable").load("shenser", {val: con});
        });
    });


</script>
</html>
